<template>
  <!-- 外层滚动容器 -->
  <div class="h-screen overflow-y-auto bg-gray-50">

    <!-- 顶部导航 固定-->
    <div class="sticky top-0 z-10">
      <header class="bg-primary text-white py-4 px-6 text-center text-lg font-bold shadow-md">
        我的订单
      </header>  
    </div>

      <main class="pb-20">
      <div class="flex flex-col p-2">
        <!-- 未支付订单信息 -->
        <h2 class="text-gray-500 text-base font-normal sm:text-base md:text-base opacity-90">未支付订单信息:</h2>
        <div>
          <!-- 第一个未支付订单 -->
          <div class="flex justify-between items-center">
            <!-- 商家名称 -->
            <div class="flex items-center gap-3 cursor-pointer" @click="toggleOrderDetails('unpaid1')">
                <h2 class="text-base font-semibold text-gray-800">万家饺子（软件园E18店）</h2>
                <font-awesome-icon 
                    :icon="['fas', 'chevron-down']" 
                    class="transition-transform duration-200"
                    :class="{'transform rotate-180': expandedOrders.unpaid1}"
                />   
            </div>
            <!-- 订单总价 -->
            <span class="justify-end text-base text-#ff4500 justify-end">¥49</span>
          </div>

          <!-- 商品列表和配送费 - 可折叠-->
          <div v-show="expandedOrders.unpaid1">
              <!-- 商品列表 -->
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>纯肉鲜肉（水饺）x2</span>
                  <span>¥15</span>
              </div>
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>玉米鲜肉（水饺）x1</span>
                  <span>¥16</span>
              </div>
              <!-- 配送费 -->
              <div class="flex justify-between text-xs text-gray-600 py-2 border-b last:border-b-0">
                  <span>配送费</span>
                  <span>¥3</span>
              </div>
          </div>

          <!-- 第二个未支付订单 -->
          <div class="flex justify-between items-center mt-2">
            <!-- 商家名称 -->
            <div class="flex items-center gap-3 cursor-pointer" @click="toggleOrderDetails('unpaid2')">
                <h2 class="text-base font-semibold text-gray-800">小锅豆腐馆（全运店）</h2>
                <font-awesome-icon 
                    :icon="['fas', 'chevron-down']" 
                    class="transition-transform duration-200"
                    :class="{'transform rotate-180': expandedOrders.unpaid2}"
                />   
            </div>
            <!-- 订单总价 -->
            <span class="justify-end text-base text-#ff4500 justify-end">¥55</span>
          </div>

          <!-- 商品列表和配送费 - 可折叠-->
          <div v-show="expandedOrders.unpaid2">
              <!-- 商品列表 -->
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>纯肉鲜肉（水饺）x2</span>
                  <span>¥15</span>
              </div>
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>玉米鲜肉（水饺）x1</span>
                  <span>¥16</span>
              </div>
              <!-- 配送费 -->
              <div class="flex justify-between text-xs text-gray-600 py-2 border-b last:border-b-0">
                  <span>配送费</span>
                  <span>¥3</span>
              </div>
          </div>
        </div>

        <!-- 已支付订单 -->
        <h2 class="text-gray-500 text-base font-normal sm:text-base md:text-base opacity-90 mt-4">已支付订单信息:</h2>
        <div>
          <!-- 第一个已支付订单 -->
          <div class="flex justify-between items-center">
            <!-- 商家名称 -->
            <div class="flex items-center gap-3 cursor-pointer" @click="toggleOrderDetails('paid1')">
                <h2 class="text-base font-semibold text-gray-800">万家饺子（软件园E18店）</h2>
                <font-awesome-icon 
                    :icon="['fas', 'chevron-down']" 
                    class="transition-transform duration-200"
                    :class="{'transform rotate-180': expandedOrders.paid1}"
                />   
            </div>
            <!-- 订单总价 -->
            <span class="justify-end text-base text-#ff4500 justify-end">¥49</span>
          </div>

          <!-- 商品列表和配送费 - 可折叠-->
          <div v-show="expandedOrders.paid1">
              <!-- 商品列表 -->
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>纯肉鲜肉（水饺）x2</span>
                  <span>¥16</span>
              </div>
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>玉米鲜肉（水饺）x1</span>
                  <span>¥15</span>
              </div>
              <!-- 配送费 -->
              <div class="flex justify-between text-xs text-gray-600 py-2 border-b last:border-b-0">
                  <span>配送费</span>
                  <span>¥3</span>
              </div>
          </div>

          <!-- 第二个已支付订单 -->
          <div class="flex justify-between items-center mt-2">
            <!-- 商家名称 -->
            <div class="flex items-center gap-3 cursor-pointer" @click="toggleOrderDetails('paid2')">
                <h2 class="text-base font-semibold text-gray-800">小锅豆腐馆（全运店）</h2>
                <font-awesome-icon 
                    :icon="['fas', 'chevron-down']" 
                    class="transition-transform duration-200"
                    :class="{'transform rotate-180': expandedOrders.paid2}"
                />   
            </div>
            <!-- 订单总价 -->
            <span class="justify-end text-base text-#ff4500 justify-end">¥55</span>
          </div>

          <!-- 商品列表和配送费 - 可折叠-->
          <div v-show="expandedOrders.paid2">
              <!-- 商品列表 -->
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>纯肉鲜肉（水饺）x2</span>
                  <span>¥15</span>
              </div>
              <div class="flex justify-between text-xs text-gray-600 py-1 border-b last:border-b-0">
                  <span>玉米鲜肉（水饺）x1</span>
                  <span>¥16</span>
              </div>
              <!-- 配送费 -->
              <div class="flex justify-between text-xs text-gray-600 py-2 border-b last:border-b-0">
                  <span>配送费</span>
                  <span>¥3</span>
              </div>
          </div>
        </div>

      </div>

      </main>
      <Footer class="fixed bottom-0 w-full"/>
    </div>
</template>

<script setup>
  import 'swiper/css/autoplay';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import 'swiper/css/navigation';
  import Footer from '@/components/Footer.vue'

  import { ref } from 'vue';
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

  // 使用对象存储每个订单的展开状态
  const expandedOrders = ref({
    unpaid1: false,
    unpaid2: false,
    paid1: false,
    paid2: false
  });
  
  // 切换订单详情显示状态
  const toggleOrderDetails = (orderId) => {
    expandedOrders.value[orderId] = !expandedOrders.value[orderId];
  };
</script>

<style scoped>
.bg-primary {
  background-color: #0097FF;
}
/* 分割线 */
.d-border {
  border-bottom: 1px solid rgb(165, 163, 163);
}
</style>